<template>
    <div class="con">
        <div class="header">
            <p @click="ok()">完成</p>
        </div>
        <div class="dateinfo">
            <p class="fl" @click="start()">{{startTime}}</p>
            <span class="fl">至</span>
            <p class="fl" @click="end()">{{endTime}}</p>
        </div>

        <div class="date" v-show="show">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                @cancel="cancel"
                @confirm="confirm"
            />
        </div>
        <div class="date" v-show="show1">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                @cancel="cancel1"
                @confirm="confirm1"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: "choosedate",
    data() {
        return {
            currentDate: new Date(),

            timestamp: "",
            show: false,
            show1: false,
            startTime: "请输入开始日期",
            endTime: "请输入结束日期",
            startTime1: "",
            endTime1: ""
        };
    },
    methods: {
        confirm(value) {
            console.log(value);
            this.show = false;
            this.startTime = `${value.getFullYear()}-${value.getMonth() +
                1}-${value.getDate()}`;
            this.startTime1 = `${value.getFullYear()}${value.getMonth() +
                1}${value.getDate()}`;
        },
        cancel(value) {
            this.show = false;
        },
        confirm1(value) {
            console.log(value);
            this.show1 = false;
            this.endTime = `${value.getFullYear()}-${value.getMonth() +
                1}-${value.getDate()}`;
            this.endTime1 = `${value.getFullYear()}${value.getMonth() +
                1}${value.getDate()}`;
        },

        cancel1(value) {
            this.show1 = false;
        },
        start() {
            this.show = true;
        },
        end() {
            this.show1 = true;
        },
        // 完成
        ok() {
            if (this.startTime == "请输入开始日期") {
                this.$toast("请输入开始日期");
            } else if (this.endTime == "请输入结束日期") {
                this.$toast("请输入结束日期");
            } else {
                console.log(this.endTime1);
                if (Number(this.endTime1) < Number(this.startTime1)) {
                    this.$toast("结束日期不能小于开始日期");
                } else {
                    this.$router.push({ name: "traderecord",params: { startTime: this.startTime,endTime: this.endTime}});
                }
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #fff;
    overflow: hidden;
}
.header p {
    line-height: 44px;
    text-align: right;
    color: #ffae4e;
    margin-right: 10px;
}
.dateinfo {
    width: 90%;
    margin-left: 5%;
    margin-top: 80px;
    height: 50px;
}
.dateinfo span {
    width: 10%;
    display: inline-block;
    text-align: center;
    line-height: 50px;
}
.dateinfo p {
    height: 50px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    width: 45%;
    line-height: 50px;
    color: #cdd0da;
}
.date {
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
}
</style>
